/*
var plot1 = $.jqplot ('player_training_new', [training],{
	grid:{
		background:"transparent",
		borderColor:"#6c9922",
		gridLineColor:"#6c9922",
		shadow:false
	},
	axes: {
		xaxis: {
			pad: 0
		},
		yaxis: {
			pad: 0
		},
	},
	series:[{
	lineWidth:2,
	markerOptions: {size:2,style:"circle"}
	}],
	seriesColors:["#ffffff"]
	});
*/
var players_list=[];
var mouse_over = false;
$(document).ready(function(){
	canvas = isCanvasSupported();
	training_init();
	addHover(".training",function(){
		move_players();
	},function(){
		if(!ragdoll) move_players("field");
	});
});
function isCanvasSupported()
{
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}
var canvas;
var context_tmp,context,canvas_training,canvas_tmp;
var field_width = 980;
var field_height=850;
var team_count = {};
var player_sprite;

function cloneObject(source) {
    for (i in source) {
        if (typeof source[i] == 'source') {
            this[i] = new cloneObject(source[i]);
        }
        else{
            this[i] = source[i];
		}
    }
}
function more_players()
{
	for(var i in players_list) players_list.push(new cloneObject(players_list[i]));
	template_teams();
	players_field_random();
}
function training_init()
{
	$(".training").html(get_loading_img());
	$.post("/ajax/training_get.ajax.php",{"type":"get"},function(data){
		$(".training").html("");
		if(!data) return;
		players_list = data["players_list"];
		team_count = data["team_count"];
		template_teams();
		for(var i in players_list)
		{
			var p = players_list[i];
			if(!players_by_id[p["id"]]) players_by_id[p["id"]] = {};
			players_by_id[p["id"]]["plot"] = p["plot"];
		}

		if(canvas)
		{
			for(var i in players_list)
			{
				var pos =$(".player[number="+i+"]").offset();
				var tpos = $(".training").offset();
				players_list[i]["position_team"] = {"x":parseInt(pos.left-tpos.left),"y":parseInt(pos.top-tpos.top)};
			}
			$(".team").addClass("field_view");
			player_sprite = new Image();
			player_sprite.src="http://static.trophymanager.com/pics/training/main_sprite.png";
			canvas_training = document.createElement('canvas');
			canvas_training.width=field_width;
			canvas_training.height=field_height;
			$(canvas_training).attr("id","canvas_training").prependTo(".training").attr("style","position:absolute;top:0;left:0;");
			canvas_training = document.getElementById("canvas_training");
			context = canvas_training.getContext("2d");
			canvas_tmp = document.createElement('canvas');
			canvas_tmp.width=field_width;
			canvas_tmp.height=field_height;
			context_tmp = canvas_tmp.getContext("2d");
			players_field_random();
			move_players("field");

		}
	},"json").error(function(){
		$(".training").html("Error getting data");
	});
}
var players_draw_order = [];
var player_height=30,player_width=14;
var drawCanvas = function()
{
	if(context_tmp)context_tmp.clearRect(0, 0, field_width,field_height);
	for(var i in players_draw_order)
	{
		var p = players_list[players_draw_order[i]["num"]];
		var spritex = 0;
//		if(p["training_custom"]) spritex=56;
		if(p["fp"]=="GK" && p["age"] < 23) spritex=42;
		else if(p["fp"]=="GK") spritex=28;
		else if(p["age"]<23) spritex=14;
		context_tmp.drawImage(player_sprite,spritex,0,player_width,player_height,p.position_current.x,p.position_current.y,player_width,player_height);
	}
	context.clearRect(0, 0, field_width,field_height);
	context.drawImage(canvas_tmp,0,0);
}
var move_players_interval;
var move_to;
function move_players(move)
{
	move_to=move;
	if(move_to=="field")
	{
		$(".team").addClass("field_view");
		toggle_animations("off");
		$("#canvas_training").show();
	}
	// stop old interval
	clearInterval(move_players_interval);
//	reset delta value
	for(var i in players_list) players_list[i].position_delta=null;
	// Player move speed
	var player_speed = 15;
	// Run interval
	var move_players_interval = setInterval(function(){
		var draw=false;
		for(var i in players_list)
		{
			var cx = players_list[i].position_current.x;
			var cy = players_list[i].position_current.y;
			if(move_to=="field")
			{
				var fx = parseInt(players_list[i].position_field.x);
				var fy = parseInt(players_list[i].position_field.y);
			}
			else
			{
				var fx = parseInt(players_list[i].position_team.x);
				var fy = parseInt(players_list[i].position_team.y);
			}
			var x=fx;
			var y=fy;
			if(!players_list[i].position_delta)
			{
				var xdelta= Math.abs(cx-fx);
				var ydelta= Math.abs(cy-fy);
				players_list[i].position_delta = {"x":xdelta,"y":ydelta};

			}
			var xmove=1*player_speed+2;
			var ymove=players_list[i].position_delta.y/players_list[i].position_delta.x;
			if(ymove<0.1) ymove=0.1;
			ymove=ymove*player_speed;
			if(cx>fx)
			{
				x=cx-xmove;
				if(x<fx) x=fx;
				else draw=true
			}
			else if(cx<fx)
			{
				x=cx+xmove;
				if(x>fx) x=fx;
				else draw=true;
			}
			if(cy>fy)
			{
				y=cy-ymove;
				if(y<fy) y=fy;
				else draw=true;
			}
			else if(cy<fy)
			{
				y=cy+ymove;
				if(y>fy) y=fy;
				else draw=true;
			}
			players_list[i].position_current.x = parseInt(x);
			players_list[i].position_current.y = parseInt(y);
		}
		drawCanvas();
		if(!draw)
		{
			clearInterval(move_players_interval);
			if(move_to!="field")
			{
				$(".team").removeClass("field_view");
				toggle_animations("on");
				$("#canvas_training").hide();
				context.clearRect(0, 0, field_width,field_height);
			}
		}
	},25);
}
function template_teams()
{
	$(".team").remove();
	for(var i=1;i<8;i++)
	{
		var $d = $("<div />").addClass("team").appendTo(".training").attr("id","team"+i).attr("team",i);
		if(i==7) $d.addClass("gk");
		template_team_players(i);
		if(i<7)
		{
			addHover($d,function(el,el2){
				if(ragdoll) $(el).addClass("hover");
				//$(el).addClass("hover");
			},function(el){
				$(el).removeClass("hover");
			});
		}
	}
	$(".training").append(template_legend());
}
function template_team_players(team)
{
	var $tt = $("<div />").html($("<span>").addClass("large bold").html(team_headers[team]));
	if(team_tooltips[team].text) $tt.append("<br />"+pagecontent[14]+": "+team_tooltips[team].text);
	if(team_tooltips[team].positions) $tt.append("<br />"+pagecontent[14]+": "+team_tooltips[team].positions.join(", "));
	if(team_tooltips[team].skills) $tt.append("<br />"+pagecontent[13]+": "+team_tooltips[team].skills.join(", "));
	if(team_tooltips[team].skill_text) $tt.append("<br />"+pagecontent[13]+": "+team_tooltips[team].skill_text);
	$("#team"+team).html("");
	$("#team"+team).append(
		$("<div />").append($("<div />").addClass("team_header").html(team_headers[team]).tooltip($tt))
	);
	var count=0;
	for(var i=0;i<players_list.length;i++)
	{
		var p = players_list[i];
		var pteam = Number(p["training"]);
		if(p["fp"] == "GK")
		{
			// Put gks on gk team
			if(pteam != 7)
			{
				pteam=7;
				post_player_team(i,pteam,true);
			}
//			players_list[i]["training"] = pteam;
		}
		if(pteam==0 && p["fp"] != "GK")
		{
			pteam = 1; // Find team?
			while(team_count[pteam] > 16 && pteam<6)
			{
				pteam++;
			}
			post_player_team(i,pteam,true); // Find team?
//			players_list[i]["training"] = pteam;

		}
		if(pteam==team)
		{
			count++;
			var $p = template_player(p).attr("number",i);
			$("#team"+team).append(
				$p
			);
			var pos = $p.offset();
			var tpos = $(".training").offset();
			var team_pos = {"x":parseInt(pos.left-tpos.left),"y":parseInt(pos.top-tpos.top)};
			players_list[i]["position_team"] = {"x":team_pos.x,"y":team_pos.y};
			$p.mousedown(function(e){
				if(e.which!=1 || e.ctrlKey) return;
				enable_drag($(this).attr("number"));
				$(this).addClass("active");
				return false;
			});
			$p.click(function(e){
				if(e.which==2 || (e.which==1 && e.ctrlKey))
				{
					var p = players_list[$(this).attr("number")];
					window.open("/players/"+p["id"]+"/#/page/training/");
				}
			});
		}
	}
	if(count>16) $("#team"+team).addClass("team32");
	else $("#team"+team).removeClass("team32");
}
function template_legend()
{

//<img src="http://static.trophymanager.com/pics/movement_mouse_right.png" style="vertical-align: middle;">i
	var $d = $("<div />").addClass("team legend align_left").append(
		$("<table />").append(
			$("<tr />").append(
				$("<td />").addClass("align_center").attr("colspan","4").append(
					$("<table />").attr("style","width:auto;margin:auto;").append($("<tr>").append(
					$("<td>").append($("<span />").addClass("player_pic")),
					$("<td>").append('<img src="http://static.trophymanager.com/pics/movement_mouse_right.png" style="vertical-align: middle;">'),
					$("<td>").attr("style","padding-left:5px").append("Drag players between teams")
					))
				)
			),
			$("<tr />").append(
				$("<td />").addClass("align_left").append($("<span />").addClass("player_pic")),
				$("<td />").addClass("align_left").append("Player"),
				$("<td />").addClass("align_left").append($("<span />").addClass("player_pic youth")),
				$("<td />").addClass("align_left").append("Under 23")
			),
			$("<tr />").append(
				$("<td />").addClass("align_left").append($("<span />").addClass("player_pic custom")),
				$("<td />").addClass("align_left").append("Player with custom training"),
				$("<td />").addClass("align_left").append(""),
				$("<td />").addClass("align_left").append("")
			),
			$("<tr />").append(
				$("<td />").addClass("align_left").append($("<span />").addClass("player_pic gk")),
				$("<td />").addClass("align_left").append("Goal keeper"),
				$("<td />").addClass("align_left").append($("<span />").addClass("player_pic gk youth")),
				$("<td />").addClass("align_left").append("Goal keeper under 23")
			),
			$("<tr />").append(
				$("<td />").addClass("align_left").append($("<img src='http://static.trophymanager.com/pics/training/star.png' />")),
				$("<td />").addClass("align_left").attr("colspan","3").append("Recently acquired player")
			),
			$("<tr />").append(
				$("<td />").addClass("align_left").append($("<img src='http://static.trophymanager.com/pics/training/padlock.png' />")),
				$("<td />").addClass("align_left").attr("colspan","3").append("Goalkeepers are locked and practice goalkeeping skills")
			)
			)
	);
	return $d;
}
var canv,cont;
function players_field_random()
{
	var x = field_width;
	var y = field_height;
	canv = document.createElement("canvas");
	canv.width=field_width;
	canv.height=field_height;
	cont = canv.getContext("2d");
	draw_blocks(cont,true);
	for(var i in players_list)
	{
		var p = players_list[i];
//		var xx = Math.floor(Math.random()*x);
//		var yy = Math.floor(Math.random()*y);
		var pos = player_field_position(p.position_team,cont,p["fp"]=="GK");
		players_list[i]["position_field"] = {"x":pos.x,"y":pos.y};
		players_list[i]["position_current"] = {"x":0,"y":300};
	}
	// Sort players so they are drawn top->down to make below players be on top.
	players_draw_order_sort();
}
function players_draw_order_sort()
{
	players_draw_order=[];
	for(var i in players_list)
	{
		var p = players_list[i];
		players_draw_order.push({"num":i,"y":p["position_field"].y});
	}
	// Sort players so they are drawn top->down to make below players be on top.
	players_draw_order.sort(function(a,b){
		if(a.y>b.y) return 1;
		else if(a.y<b.y) return -1;
		return 0;
	});

}
function player_field_position(position_team,ctx,gk)
{
	var variance = gk ? 50 : 120;
	var xx=-1;
	while(xx>field_width-player_width-10 || xx<10)
	{
		xx = Math.floor(Math.random()*variance*2)-variance+position_team.x;
	}
	var yy=-1;
	while(yy>field_height-player_height-10 || yy<10)
	{
		yy = Math.floor(Math.random()*variance*2)-variance+position_team.y;
	}
	var d1 = ctx.getImageData(xx,yy+player_height,1,1).data;
	var d2 = ctx.getImageData(xx+player_width,yy+player_height,1,1).data;
	var d3 = ctx.getImageData(xx,yy+player_height-4,1,1).data;
	var d4 = ctx.getImageData(xx+player_width,yy+player_height-4,1,1).data;

	if(d1[0]==255||d2[0]==255||d3[0]==255||d4[0]==255)
	{
		return player_field_position(position_team,ctx);
	}
	return {"x":xx,"y":yy};
}
function array_key_exists(needle,haystack)
{
	for(var i in haystack)
	{
		if(needle==i) return true;
	}
	return false;
}
function template_player(player)
{
	var $d = $("<div />").addClass("player").attr("player_id",player["id"]).attr("player_link",player["id"]).mouseover(function(){if(!ragdoll) $(this).addClass("hover")}).mouseout(function(){$(this).removeClass("hover")});
	activate_player_links($d);
	if(player["fp"]=="GK") $d.addClass("gk");
	if(player["age"] < 23) $d.addClass("youth");
	if(player["training_custom"]) $d.addClass("custom");
	$d.append(
		$("<div />").addClass("player_pic"),
		$("<div />").addClass("player_text").append(
			$("<div>").addClass("player_name").html(player["lastname"]),
			color_favposition(player["fp"])
		)
	);
	if(player["plot"].length < 3 && !new_team)
	{
		$d.append($("<div />").addClass("player_star"));
		// => Issue for non pro. All players starred!
	}
	return $d;
}
var dragLoop;
var ragdoll;
$(document).ready(function(){
	$(document).mouseup(function(e){
		stop_drag();
		$(".team").removeClass("hover");
		$(".player").removeClass("active");
	});
	$(document).mousemove(function(e){
		if($("#drag_move").length==0) return;
		$("#drag_move").css({
			"top":(MOUSE["y"]-2)+"px",
			"left":(MOUSE["x"]-15)+"px"
		});
	});
	setInterval(function(){
		MOUSE_PREV["x"] = MOUSE["x"];
		MOUSE_PREV["y"] = MOUSE["y"];
	},25);
});
function RagdollObject(){
	this.pos=2;
	this.prev_pos=2;
	this.seq_pos=0;
	this.stop_left_seq =[4,3,2,1,0,0,1,2,3,4,4,3,2,1,1,2,3,3,2,1,1,2,3,3,2];
	this.stop_right_seq=[0,1,2,3,4,4,3,2,1,0,0,1,2,3,3,2,1,1,2,3,3,2,1,1,2];
	this.direction=null;
}
function Ragdoll(){}
Ragdoll.prototype=new RagdollObject();


function stop_drag()
{
	if(ragdoll==null) return;
	var team = $(".team[mousemoveover=1]").attr("team");
	var prevteam = parseInt(players_list[ragdoll.number]["training"]);
	if(team_count[team] >=24)
	{
		modal.inner().html("").append(
			"The team is full. Max 24 players per team.",
			$("<div />").addClass('msgbuttons').append(make_button(global_content["ok"],"modal.hide()"))
			);
		modal.show();
	}
	if(team!=prevteam && team<7 && (team_count[team]<24||team_count[team]==null))
	{
		post_player_team(ragdoll.number,team);
		var team_pos = players_list[ragdoll.number]["position_team"];
		var field_pos = player_field_position(team_pos,cont);
		players_list[ragdoll.number]["position_field"] = {"x":field_pos.x,"y":field_pos.y};
		players_list[ragdoll.number]["position_current"] = {"x":team_pos.x,"y":team_pos.y};
		players_list[ragdoll.number].position_delta=null;
	}
	ragdoll=null;
$("#drag_move").remove();
	clearInterval(dragLoop);
}
var MOUSE_PREV = {"x":0,"y":0}
var MOUSE2 = {"x":0,"y":0}
function enable_drag(player_num)
{
	var p = players_list[player_num];
	if(p["fp"]=="GK") return;
	ragdoll=new Ragdoll();
	ragdoll.number = player_num;
	var drag = $("<div />").attr("id","drag_move").addClass("drag").appendTo("body").css({
		"top":(MOUSE["y"]-2)+"px",
		"left":(MOUSE["x"]-15)+"px"
	});
	if(p["age"]<23) drag.addClass("youth");
	if(p["fp"]=="GK") drag.addClass("gk");
	dragLoop = setInterval(update_drag,50);
	$(document).mousemove(update_drag);
}
var stop_swing = 0;
var update_drag = function(){
	if(!ragdoll) return stop_drag();

	var pos = 2;
	if(MOUSE["x"]>MOUSE_PREV["x"]+1)
	{
		ragdoll.direction="right";
		if(ragdoll.pos>0) ragdoll.pos--;
		ragdoll.seq_pos=0;
	}
	else if(MOUSE["x"]<MOUSE_PREV["x"]-1)
	{
		ragdoll.direction="left";
		if(ragdoll.pos<4) ragdoll.pos++;
		ragdoll.seq_pos=0;
	}
	else
	{
		if(ragdoll.direction=="left" && ragdoll.seq_pos<ragdoll.stop_left_seq.length)
		{
			ragdoll.pos=ragdoll.stop_left_seq[ragdoll.seq_pos];
			ragdoll.seq_pos++;
		}
		else if(ragdoll.direction=="right" && ragdoll.seq_pos<ragdoll.stop_right_seq.length)
		{
			ragdoll.pos=ragdoll.stop_right_seq[ragdoll.seq_pos];
			ragdoll.seq_pos++;
		}
		else ragdoll.pos=2;
	}
	$("#drag_move").css({
		"background-position":"-"+(ragdoll.pos*31)+"px 0"
	});

}
function addHover(elem,in_function,out_function)
{
	$(elem).each(function(){
		var el = this;
		$("body").mousemove(function(){
			if(MOUSE.x>$(el).offset().left
				&& MOUSE.x<$(el).offset().left+$(el).outerWidth(el)
				&& MOUSE.y>$(el).offset().top
				&& MOUSE.y<$(el).offset().top+$(el).outerHeight(el))
			{
				if($(el).attr("mousemoveover")!=1)
				{
					$(el).attr("mousemoveover",1);
					if(typeof in_function == "function") in_function.call(this,el);
				}
			}
			else if($(el).attr("mousemoveover")==1)
			{
				$(el).attr("mousemoveover",0);
				if(typeof out_function == "function") out_function.call(this,el);
				else if(typeof in_function == "function") in_function.call(this,el);
			}
		});
	});
}

function post_player_team(player_num,team_id,initial)
{
	var player_id =players_list[player_num]["id"];
	var prevteam = players_list[player_num]["training"];
	players_list[player_num]["training"] = team_id;
	if(!initial)
	{
		template_team_players(prevteam);
		template_team_players(team_id);
	}
	$("[player_id="+player_id+"]").addClass("loading");
	$.post("/ajax/training_post.ajax.php",{"type":"player_pos","player_id":player_id,"team_id":team_id},function(data){
		setTimeout(function(){
			$("[player_id="+player_id+"]").removeClass("loading");
			if(data["success"])
			{
				team_count[prevteam]--;
				team_count[team_id]++;
			}
			else
			{
				$("[player_id="+player_id+"]").addClass("error");
			}
		},300);
	},"json").error(function(data){
		setTimeout(function(){
			$("[player_id="+player_id+"]").removeClass("loading").addClass("error");
		},300);

	});
}
function color_favposition(pos,ignore_side,no_wrapper,only_one_side)
{
	ignore_side = ignore_side || false;
	pos = pos || "";
	var str = "";
	var side = ["",""];
	pos = pos.toLowerCase();
	// Substitute
	if(pos.indexOf("sub") != -1) return "<span class=\"favposition short\"><span class=\"sub\">"+global_content["substitute_abbr"]+"</span></span>";
	// More than one position
	var pos2 = pos.split("/");
	if(pos2[1]) return "<span class=\"favposition short\">"+color_favposition(pos2[0],false,true)+"/"+color_favposition(pos2[1],false,true)+"</span";
	var pos2 = pos.split(", ");
	if(pos2[1]) return "<span class=\"favposition short\">"+color_favposition(pos2[0],false,true)+", "+color_favposition(pos2[1],false,true)+"</span";

	// Only one position
	if(pos == "gk")
	{
		side = pos.split("gk");
		str = "<span class=\"gk\">"+global_content["gk_xxx"]+"</span>";
	}
	else if(pos.indexOf("dm") != -1)
	{
		side = pos.split("dm");
		str = "<span class=\"m\">"+global_content["dm_xxx"]+"</span>";
	}
	else if(pos.indexOf("d") != -1)
	{
		side = pos.split("d");
		str = "<span class=\"d\">"+global_content["d_xxx"]+"</span>";
	}
	else if(pos.indexOf("om") != -1)
	{
		side = pos.split("om");
		str = "<span class=\"om\">"+global_content["om_xxx"]+"</span>";
	}
	else if(pos.indexOf("m") != -1)
	{
		side = pos.split("m");
		str = "<span class=\"m\">"+global_content["m_xxx"]+"</span>";
	}
	else if(pos.indexOf("f") != -1)
	{
		side = pos.split("f");
		str = "<span class=\"f\">"+global_content["f_xxx"]+"</span>";
	}
	else return "";
	if(pos.indexOf("f") != -1) side = "";
	else if(only_one_side && side[1].indexOf("c") != -1) side = "c"; // C not split into CL,C,CR but input like that
	else side = side[1];
	side = side.replace("l",global_content["left_abbr"]).replace("r",global_content["right_abbr"]).replace("c",global_content["center_abbr"]);
	var side_html = ignore_side || side=="" ? "" : " "+"<span class=\"side\">"+side+"</span>";
	if(no_wrapper) return str+side_html;
	return "<span class=\"favposition short\">"+str+side_html+"</span>";
}
var anims = [
	{name:"pushup",anim:[0,1,2,3,4,4,4,4,5,5,5,5,4,4,4,4,5,5,5,5,4,4,4,4,5,5,5,5,4,4,4,4,5,5,5,5,4,4,4,4,5,5,5,5,4,4,3,2,1,0],ms:100,width:26,height:28}
	];
var anim_objects = [];
var animation_interval;
function add_animation()
{

	var num = Math.floor(Math.random()*players_list.length);
	if(anim_objects[num]) return;
	$p = $(".player[number="+num+"]");
	var anim = new AnimObject();
	var a = anims[Math.floor(Math.random()*anims.length)];
	anim.name = a.name;
	anim.ms = a.ms;
	anim.anim = a.anim;
	anim.num = num;
	anim.width = a.width;
	anim.height = a.height;

	anim_objects.push(anim);
	$p.append($("<div />").addClass("animation").attr("style","position:absolute;top:4px;left:-2px;").attr("id","animation"+num));
}
function toggle_animations(mode)
{
	if(animation_interval && mode!="on")
	{
		clearInterval(animation_interval);
		animation_interval=null;
	}
	else if(!animation_interval || mode=="on")
	{
		clearInterval(animation_interval);
		animation_interval = setInterval(run_animations,100);
	}
}
var run_animations = function()
{
	if(Math.random()*100>=99)
	{
		add_animation();
	}
	if(anim_objects.length==0) return;
	var tmp = [];
	for(var i in anim_objects)
	{
		var a = anim_objects[i];
		var $p = $("[number="+a.num+"]");
		if(a.anim_pos>=a.anim.length)
		{
			$p.find(".animation").remove();
//			$p.find(".player_pic").show();
			$p.find(".player_pic").css("background","");
//			$p.find(".player_text").css("margin-left","");
			continue;
		}
//		$p.find(".player_pic").hide();
//		$p.find(".player_text").css("margin-left","12px");
		$p.find(".player_pic").css("background","transparent");
		var pos = "";
		if($p.hasClass("gk")) pos += "_gk";
		if($p.hasClass("youth")) pos += "_youth";
		$("#animation"+a.num).css({
//			"background-color":"#000",
			"background-image":"url(http://static.trophymanager.com/pics/training/"+a.name+"_sprite"+pos+".png)",
			"background-repeat":"no-repeat",
			"background-position":"-"+(a.width*a.anim[a.anim_pos])+"px 0",
			"width":a.width+"px",
			"height":a.height+"px"
		});
		a.anim_pos++;
		tmp.push(a);
	}
	anim_objects = tmp;
}
function AnimObject(){
//	this.pos=0;
//	this.prev_pos=0;
	this.anim_pos=0;
	this.anim =[];
}
function Anim(){}
Anim.prototype=new AnimObject();
var draw_blocks = function(ctx,no_grid) {
ctx.save();
// bg
ctx.fillStyle="#000000";
ctx.fillRect(0,0,field_width,field_height);
// blocks
ctx.translate(0,0);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(980,0);
ctx.lineTo(980,805);
ctx.lineTo(0,805);
ctx.closePath();
ctx.clip();
ctx.translate(0,0);
ctx.translate(0,0);
ctx.scale(1,1);
ctx.translate(0,0);
ctx.strokeStyle = 'rgba(0,0,0,0)';
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;
ctx.save();
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.moveTo(626,0);
ctx.lineTo(626,32);
ctx.lineTo(712,53);
ctx.lineTo(712,21);
ctx.lineTo(626,0);
ctx.closePath();
ctx.moveTo(837,236);
ctx.lineTo(831,278);
ctx.lineTo(944,341);
ctx.lineTo(968,326);
ctx.lineTo(966,297);
ctx.lineTo(837,236);
ctx.closePath();
ctx.moveTo(698,587);
ctx.lineTo(713,606);
ctx.lineTo(931,504);
ctx.lineTo(928,473);
ctx.lineTo(698,587);
ctx.closePath();
ctx.moveTo(66,666);
ctx.lineTo(68,706);
ctx.lineTo(139,752);
ctx.lineTo(179,754.79);
ctx.lineTo(179,771);
ctx.lineTo(219,771);
ctx.lineTo(219,725);
ctx.lineTo(179,725);
ctx.lineTo(179,728);
ctx.lineTo(175,692);
ctx.lineTo(102,651);
ctx.lineTo(66,666);
ctx.closePath();
ctx.moveTo(441,540);
ctx.lineTo(441,582);
ctx.lineTo(481,582);
ctx.lineTo(481,540);
ctx.lineTo(441,540);
ctx.closePath();
ctx.moveTo(329,510);
ctx.lineTo(332,547);
ctx.lineTo(393,531);
ctx.lineTo(393,494);
ctx.lineTo(329,510);
ctx.closePath();
ctx.moveTo(179,475);
ctx.lineTo(179,513);
ctx.lineTo(220,513);
ctx.lineTo(220,475);
ctx.lineTo(179,475);
ctx.closePath();
ctx.moveTo(30,545);
ctx.lineTo(30,586);
ctx.lineTo(71,586);
ctx.lineTo(71,545);
ctx.lineTo(30,545);
ctx.closePath();
ctx.moveTo(31,442);
ctx.lineTo(31,469);
ctx.lineTo(61,469);
ctx.lineTo(199,398);
ctx.lineTo(199,377);
ctx.lineTo(187,364);
ctx.lineTo(31,442);
ctx.closePath();
ctx.moveTo(292,5);
ctx.lineTo(292,61);
ctx.lineTo(414,61);
ctx.lineTo(414,112);
ctx.lineTo(578,112);
ctx.lineTo(578,13);
ctx.lineTo(420,13);
ctx.lineTo(420,5);
ctx.lineTo(292,5);
ctx.closePath();
ctx.moveTo(31,136);
ctx.lineTo(31,184);
ctx.lineTo(53,184);
ctx.lineTo(53,136);
ctx.lineTo(31,136);
ctx.closePath();
ctx.moveTo(68,97);
ctx.lineTo(68,144);
ctx.lineTo(90,144);
ctx.lineTo(90,97);
ctx.lineTo(68,97);
ctx.closePath();
ctx.moveTo(80,41);
ctx.lineTo(119,80);
ctx.lineTo(159,80);
ctx.lineTo(159,60);
ctx.lineTo(94,38);
ctx.lineTo(80,41);
ctx.closePath();
ctx.moveTo(173,4);
ctx.lineTo(173,38);
ctx.lineTo(246,66);
ctx.lineTo(246,27);
ctx.lineTo(173,4);
ctx.closePath();
ctx.moveTo(29,217);
ctx.lineTo(29,289);
ctx.lineTo(111,289);
ctx.lineTo(111,217);
ctx.lineTo(29,217);
ctx.closePath();
ctx.moveTo(492,598);
ctx.lineTo(492,796);
ctx.lineTo(980,796);
ctx.lineTo(980,598);
ctx.closePath();
ctx.fill();
ctx.stroke();
//grid
if(!no_grid)
{
ctx.strokeStyle="#aaaaaa";
ctx.beginPath();
ctx.moveTo(100,0);
ctx.lineTo(100,field_height);
ctx.moveTo(200,0);
ctx.lineTo(200,field_height);
ctx.moveTo(300,0);
ctx.lineTo(300,field_height);
ctx.moveTo(400,0);
ctx.lineTo(400,field_height);
ctx.moveTo(500,0);
ctx.lineTo(500,field_height);
ctx.moveTo(600,0);
ctx.lineTo(600,field_height);
ctx.moveTo(700,0);
ctx.lineTo(700,field_height);
ctx.moveTo(900,0);
ctx.lineTo(900,field_height);
ctx.moveTo(800,0);
ctx.lineTo(800,field_height);
ctx.moveTo(0,100);
ctx.lineTo(field_width,100);
ctx.moveTo(0,200);
ctx.lineTo(field_width,200);
ctx.moveTo(0,300);
ctx.lineTo(field_width,300);
ctx.moveTo(0,400);
ctx.lineTo(field_width,400);
ctx.moveTo(0,500);
ctx.lineTo(field_width,500);
ctx.moveTo(0,600);
ctx.lineTo(field_width,600);
ctx.moveTo(0,700);
ctx.lineTo(field_width,700);
ctx.moveTo(0,800);
ctx.lineTo(field_width,800);
ctx.stroke();
// end grid
}
ctx.restore();
ctx.restore();
};
 